import 'package:flutter/material.dart';
import 'package:flutter_tech_shop/src/cart_controller.dart';
import 'package:flutter_tech_shop/src/shared/Product.dart';
import 'package:flutter_tech_shop/widgets/app_button.dart';
import 'package:get/get.dart';

class CartPage extends StatefulWidget {
  const CartPage({super.key});

  @override
  State<CartPage> createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
  final cartController = Get.find<CartController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('购物车'), centerTitle: true),
      body: Obx(() => cartController.products.isEmpty ? empty() : cartList()),
    );
  }

  Widget empty() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Row(children: [SizedBox()]),
        const Text('购物车空空如也'),
        const SizedBox(height: 15),
        AppButton(width: 100, height: 50, onPressed: () {}, content: '去逛逛'),
      ],
    );
  }

  Widget cartList() {
    return ListView.separated(
        itemBuilder: (context, index) {
          Product productItem = cartController.products[index];

          return Stack(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(left: 16, right: 16, top: 16),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(16))),
                child: Row(
                  children: <Widget>[
                    Container(
                      margin:
                          EdgeInsets.only(right: 8, left: 8, top: 8, bottom: 8),
                      width: 80,
                      height: 80,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(14)),
                          color: Colors.blue.shade200,
                          image: DecorationImage(
                              image: AssetImage(productItem.image!))),
                    ),
                    Expanded(
                      flex: 100,
                      child: Container(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              padding: EdgeInsets.only(right: 8, top: 4),
                              child: Text(
                                productItem.name!,
                                maxLines: 2,
                                softWrap: true,
                              ),
                            ),
                            SizedBox(height: 6),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                // Text(
                                //   productItem.type!,
                                //   style: CustomTextStyle.textFormFieldRegular
                                //       .copyWith(color: Colors.grey, fontSize: 14),
                                // ),
                                // GestureDetector(
                                //   onTap: () {
                                //     Get.to(CustomApply());
                                //   },
                                //   child: Text(
                                //     '海关申请',
                                //     style: CustomTextStyle.textFormFieldRegular
                                //         .copyWith(color: Colors.grey, fontSize: 14),
                                //   ),
                                // )
                              ],
                            ),
                            Container(
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Text(
                                    productItem.price!,
                                    // style: CustomTextStyle.textFormFieldBlack
                                    //     .copyWith(color: Colors.green),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.end,
                                      children: <Widget>[
                                        GestureDetector(
                                          onTap: () {},
                                          child: Icon(
                                            Icons.remove,
                                            size: 24,
                                            color: Colors.grey.shade700,
                                          ),
                                        ),
                                        Container(
                                          color: Colors.grey.shade200,
                                          padding: const EdgeInsets.only(
                                              bottom: 2, right: 12, left: 12),
                                          child: Text(
                                            productItem.count.toString(),
                                            // style: CustomTextStyle.textFormFieldSemiBold,
                                          ),
                                        ),
                                        Icon(
                                          Icons.add,
                                          size: 24,
                                          color: Colors.grey.shade700,
                                        )
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Align(
                alignment: Alignment.topRight,
                child: Container(
                  width: 24,
                  height: 24,
                  alignment: Alignment.center,
                  margin: EdgeInsets.only(right: 10, top: 8),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(4)),
                      color: Colors.green),
                  child: GestureDetector(
                    onTap: () {
                      cartController.products.removeLast();
                      cartController.products.refresh();
                    },
                    child: const Icon(
                      Icons.close,
                      color: Colors.white,
                      size: 20,
                    ),
                  ),
                ),
              )
            ],
          );
        },
        separatorBuilder: (context, index) {
          return SizedBox();
        },
        itemCount: cartController.products.length);
  }
}
